<template>
  <el-card shadow="hover">
    <template v-slot:header>
      <div class="k-title">用户信息</div>
    </template>

    <el-descriptions :column="1" class="mb-2">
      <el-descriptions-item
        v-for="(item, index) in userInfoList"
        :key="index"
        :label="item.label"
        >{{
          item.formatter
            ? item.formatter(userInfo[item.prop])
            : userInfo[item.prop]
        }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      v-for="(row, index) in statisticsList"
      :key="index"
      :column="1"
      :title="row.title"
    >
      <el-descriptions-item
        v-for="item in row.children"
        :key="item.prop"
        :label="item.label"
      >
        <!-- {{ item.prop }} -->
        {{ statistics[item.prop] || 0 }}</el-descriptions-item
      >
    </el-descriptions>
  </el-card>
</template>

<script lang="ts" setup>
import { detailApi } from "@/api/statistics/staff";
import { useRoute } from "vue-router";
import { ref } from "vue";

const route = useRoute();

const userInfo = ref({});
const userInfoList = [
  { label: "账号", prop: "userName" },
  { label: "用户名", prop: "nickName" },
  { label: "角色", prop: "roleName" },
  {
    label: "组织",
    prop: "ancestorsName"
  },
  { label: "工具室", prop: "warehouseName" },
  {
    label: "账号状态",
    prop: "status",
    formatter: status => {
      let text = "正常";
      if (status == 1) {
        text = "冻结";
      } else if (status == 2) {
        text = "注销";
      }
      return text;
    }
  }
] as any[];

const statistics = ref({});
const statisticsList = [
  {
    title: "近期统计",
    children: [
      { label: "近期借出", prop: "recentLendCount" },
      { label: "近期归还", prop: "recentReturnCount" },
      { label: "近期时长", prop: "recentUseHours" },
      { label: "近期报修", prop: "recentReportFixCount" }
    ]
  },
  {
    title: "数据统计",
    children: [
      { label: "累计借出", prop: "totalLendCount" },
      { label: "累计归还", prop: "totalReturnCount" },
      { label: "累计时长", prop: "totalUseHours" },
      { label: "累计报修", prop: "totalReportFixCount" }
    ]
  }
];
detailApi({ userId: route.query.userId }).then(res => {
  const data = { ...res.data } as any;
  userInfo.value = data?.userVo;
  statistics.value = data?.detailUserStatisticsVo;
});
</script>

<style lang="scss" scoped>
::v-deep(.el-descriptions__label) {
  display: inline-block;
  width: 65px;
}
</style>
